<template>
  <div class="chat-container">
    <div class="chat-window" ref="chatWindow">
      <el-row v-for="(message, index) in messages" :key="index"
        :class="['message-row', message.type === 1 ? 'left' : 'right']">

        <el-col :span="message.type === 1 ? 18 : 18" :offset="message.type === 1 ? 0 : 6">
          <div class="message">
            <div class="avatar">
              <el-avatar :src="message.type === 1 ? user1.avatar : user2.avatar"></el-avatar>
            </div>
            <div class="message-content">
              <div class="user-info">
                <span class="username">{{ message.type === 1 ? user1.name : user2.name }}</span>
                <span class="timestamp">{{ message.time }}</span>
              </div>
              <div :class="['chat-bubble', message.type === 1 ? 'left' : 'right']">
                {{ message.value }}
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="message-input">
      <el-input v-model="newMessage" placeholder="Type a message" class="input-box"></el-input>
      <el-button type="primary" @click="sendMessage" class="send-button">Send</el-button>
      <el-button type="primary" @click="axios_test" class="send-button">接口测试</el-button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      user1: {
        name: "User1",
        avatar: "https://via.placeholder.com/50"
      },
      user2: {
        name: "User2",
        avatar: "https://via.placeholder.com/50"
      },
      messages: [
        { type: 1, value: "我是傅坠", time: "10:00 AM" },
        { type: 2, value: "你不是傅坠", time: "10:01 AM" },
        { type: 1, value: "那我是谁?", time: "10:02 AM" },
        { type: 2, value: "你是傻逼", time: "10:02 AM" }
      ],
      newMessage: ""
    };
  },
  methods: {
    axios_test() {
      // 创建一个obj对象
      let obj = {
        question_value: "你们营业到几点?"
      };

      // 使用axios发送POST请求
      axios.post('http://localhost:5000/api', obj)
        .then(function (response) {
          // 请求成功，打印返回的数据
          console.log(response.data);
        })
        .catch(function (error) {
          // 请求失败，打印错误信息
          console.log(error);
        });
    },
    sendMessage() {
      if (this.newMessage.trim() !== "") {
        const newMsg = {
          type: 1, // Assuming user1 is the current user
          value: this.newMessage,
          time: new Date().toLocaleTimeString()
        };
        this.messages.push(newMsg);
        this.newMessage = "";
        this.$nextTick(() => {
          const chatWindow = this.$refs.chatWindow;
          chatWindow.scrollTop = chatWindow.scrollHeight;
        });
      }
    }
  }
};
</script>

<style scoped>
.chat-container {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.chat-window {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
}

.message-row {
  display: flex;
  margin-bottom: 10px;
}

.left .message {
  flex-direction: row;
}

.right .message {
  float: right;
  flex-direction: row-reverse;
}

.message {
  display: flex;
  align-items: flex-start;
}

.avatar {
  margin: 0 10px;
}

.message-content {
  display: flex;
  flex-direction: column;
  max-width: 70%;
}

.user-info {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #888;
}

.chat-bubble {
  padding: 10px 15px;
  border-radius: 10px;
  margin-top: 5px;
  max-width: 100%;
  word-wrap: break-word;
}

.left .chat-bubble {
  background-color: #d3f9d8;
  text-align: left;
}

.right .chat-bubble {
  background-color: #f1f0f0;
  text-align: right;
}

.message-input {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  border-top: 1px solid #ddd;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}

.input-box {
  flex: 1;
  margin-right: 10px;
}

.send-button {
  flex-shrink: 0;
}
</style>
